<template>
  <div class="crash-report8">
    <el-row>
      <el-col :span="24">
        <div id="error-report" style="width: 100%; height:350px;" v-loading="errorLoading"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import echarts from 'echarts'
  import lodash from 'lodash'

  var resultData = [
    { value: 22.24, name: '请求超时' },
    { value: 17.00, name: '未知主机' },
    { value: 11.37, name: '建立连接失败' },
    { value: 4.50, name: '非法URL' },
    { value: 2.27, name: 'SSL证书错误' },
    { value: 0.24, name: '客户端协议错误' },
    { value: 0.33, name: '非法响应内容' }
  ]

  // var topData = lodash.take(resultData, 5).reverse()
  var topData = {
    andriod: [15.02, 14.39, 6.78, 0.34, 2.24],
    ios: [7.22, 2.61, 4.59, 4.16, 0.03]
  }

  export default {
    data () {
      return {
        errorLoading: false,
        chartsInstance: {
          error: ''
        },
        resultData: resultData,
        topData: topData
      }
    },
    activated () {
      this.initEcharts()
    },
    methods: {
      initEcharts () {
        var vm = this
        vm.chartsInstance.error = echarts.init(document.getElementById('error-report'))
        vm.getErrorReport()
        window.addEventListener('resize', () => {
          vm.chartsInstance.error.resize()
        })
      },
      getErrorReport () {
        var vm = this
        vm.errorLoading = true
        var option = {
          title: {
            text: 'APP错误网络整体分布',
            // top: 'center',
            // left: '20%'
            left: 10
          },
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          roam: false, // 鼠标缩放及平移
          focusNodeAdjacency: false, // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点
          // color: ['#3C9FDA', '#73A0C7', '#67AF4C', '#3F8A6C', '#304F92', '#539D8F', '#1D1C55'],
          // color: ['#2F4554', '#61A0A8', '#D48265', '#91C7AE', '#749F83', '#CA8622'],
          color: ['#00A65A', '#3F8B65', '#605ca8', '#34A0D9', '#00C0EF', '#F39C12', '#FF851B'],
          legend: {
            top: '30%',
            right: '5%',
            itemWidth: 10,
            itemHeight: 10,
            data: ['Android', 'IOS']
          },
          grid: {
            width: '40%',
            left: '52%',
            right: '5%',
            bottom: 10,
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            axisLabel: {
              interval: 0
            },
            axisTick: {
              show: false
            },
            // data: ['请求超时', '未知主机', '建立连接失败', '非法URL', 'SSL证书错误']
            data: lodash.take(vm.resultData, 5).map(item => {
              return item.name
            })
          },
          yAxis: {
            name: '错误量（单位：亿）',
            nameGap: 20,
            type: 'value',
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            interval: 5,
            min: 0,
            max: 25,
            axisLabel: {
              formatter: function (value) {
                return value.toFixed(2)
              }
            }
          },
          series: [
            {
              name: '错误量',
              type: 'pie',
              hoverAnimation: false,
              radius: ['22%', '24%'],
              center: ['24%', '57%'],
              color: ['#aaa'],
              label: {
                show: false
              },
              itemStyle: {
                emphasis: {
                  color: '#aaa'
                }
              },
              tooltip: {
                show: false
              },
              data: [
                { value: 1, name: 'inner' }
              ]
            },
            {
              name: '错误量',
              type: 'pie',
              startAngle: 0,
              hoverAnimation: false,
              radius: ['36%', '55%'],
              center: ['24%', '57%'],
              itemStyle: {
                normal: {
                  borderWidth: 4,
                  borderColor: '#fff',
                  labelLine: {
                    length: 35,
                    show: false
                  }
                }
              },
              label: {
                normal: {
                  show: false,
                  formatter: '{d}%\n{b}'
                }
              },
              data: vm.resultData
            },
            {
              name: '错误数',
              type: 'pie',
              hoverAnimation: false,
              radius: ['59%', '61%'],
              center: ['24%', '57%'],
              color: ['#aaa'],
              z: -9,
              label: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                emphasis: {
                  color: '#aaa'
                }
              },
              tooltip: {
                show: false
              },
              data: [
                { value: 1, name: 'outer' }
              ]
            },
            {
              name: '错误量',
              type: 'pie',
              startAngle: 0,
              hoverAnimation: false,
              radius: ['60%', '60%'],
              center: ['24%', '57%'],
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    formatter: '{per|{d}%}\n{b|{b}}',
                    rich: {
                      per: {
                        fontSize: 12,
                        fontWeight: 700,
                        padding: [1, 2]
                      },
                      b: {
                        padding: [1, 2]
                      }
                    }
                  },
                  labelLine: {
                    show: true
                    //  length: 20
                  }
                }
              },
              data: vm.resultData
            },
            {
              type: 'graph',
              layout: 'circular',
              width: '60%',
              height: '60%',
              left: '-6%',
              top: '27%',
              circular: {
                rotateLabel: true
              },
              symbolSize: 15,
              itemStyle: {
                normal: {
                  label: {
                    rotate: true,
                    show: false
                  }
                },
                emphasis: {
                  label: {
                    show: false
                  }
                }
              },
              data: vm.resultData
            },
            {
              name: 'Android',
              type: 'bar',
              stack: 'os',
              barMaxWidth: 40,
              color: ['#3191D8'],
              data: vm.topData.andriod,
              label: {
                normal: {
                  show: true,
                  color: '#333'
                }
              }
            },
            {
              name: 'IOS',
              type: 'bar',
              stack: 'os',
              barMaxWidth: 40,
              color: ['#00A65A'],
              data: vm.topData.ios,
              label: {
                normal: {
                  show: true,
                  color: '#333',
                  position: 'top'
                }
              }
            }
          ]
        }
        vm.chartsInstance.error.setOption(option)
        vm.errorLoading = false
      }
    }
  }
</script>
<style scoped>
.el-row{
  margin-bottom: 20px;
}
.http-code-title{
  font-size: 18px;
}
.http-code-box{
  position: relative;
  width: 900px;
  margin: 0 auto;
}
.rotate-line1{
  width: 200px;
  height: 1px;
  position: absolute;
  top: 105px;
  left: 252px;
  border-top: 1px solid #345BA0;
  transform:rotate(15deg);
  -ms-transform:rotate(15deg); 	/* IE 9 */
  -moz-transform:rotate(15deg); 	/* Firefox */
  -webkit-transform:rotate(15deg); /* Safari 和 Chrome */
  -o-transform:rotate(15deg);
}
.rotate-line2{
  width: 200px;
  height: 1px;
  position: absolute;
  top: 244px;
  left: 252px;
  border-top: 1px solid #345BA0;
  transform:rotate(-15deg);
  -ms-transform:rotate(-15deg); 	/* IE 9 */
  -moz-transform:rotate(-15deg); 	/* Firefox */
  -webkit-transform:rotate(-15deg); /* Safari 和 Chrome */
  -o-transform:rotate(-15deg);
}
.http-code-table{
  display: inline-block;
  width: 350px;
  height: 350px;
  position: absolute;
  top: -5px;
  left: 442px;
  z-index: 100;
}
.left-top-angle{
  width: 43px;
  height: 50px;
  position: absolute;
  top: 43px;
  left: 0;
  background-color: #fff;
  z-index: 99;
}
.right-top-angle{
  width: 43px;
  height: 50px;
  position: absolute;
  top: 43px;
  right: 0;
  background-color: #fff;
  z-index: 99;
}
.left-bottom-angle{
  width: 43px;
  height: 50px;
  position: absolute;
  left: 0;
  bottom: 43px;
  background-color: #fff;
  z-index: 99;
}
.right-bottom-angle{
  width: 43px;
  height: 50px;
  position: absolute;
  right: 0;
  bottom: 43px;
  background-color: #fff;
  z-index: 99;
}
.http-code-table .http-code-radius{
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  border: 20px solid #E3ECF5;
  z-index: 100;
}
.http-code-table .el-table{
  width: 86%;
  position: absolute;
  top: 78px;
  left: 28px;
  z-index: 98; 
}
</style>

